<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>TestWebsocket</title>

    <script type="text/javascript">
        function LinkServer() {
            // 声明连接
            var Server_Com;
            if ("WebSocket" in window) {
                Server_Com = new WebSocket("ws://127.0.0.1:1840/api/v1/k8s/pod/logs?namespace_name=crust-v2x&pod_name=auth-7676cc959f-fwkbl");
                console.log("新建连接到->127.0.0.1:1840");
            }

            // 建立连接后发送
            Server_Com.onopen = function() {

                Server_Com.send("Hello Server!"); // Web Socket 已连接上，使用 send() 方法发送数据
                console.log("已连接上服务器");
            }

            // 接收服务器消息
            Server_Com.onmessage = function(event) {
                var recv_msg = event.data;

                if (recv_msg == "Hello Client!") {
                    console.log("接收到服务器的问候: " + recv_msg); // 用于提示收到信息
                } else {
                    //document.getElementById("Time").textContent = recv_msg; // 实时更新显示服务器发回的时间
                    document.getElementById("Time").textContent = document.getElementById("Time").textContent + "\r\n" + recv_msg; // 实时更新显示服务器发回的时间
                    console.log("接收到服务器数据: " + recv_msg);
                }
            }
        }

    </script>
</head>

<body>
<p>接收到的信息:</p>
<p id="Time">crow-logger测试</p>

<button onclick="LinkServer()">连接</button>

</body>

</html>